<template>
  <div class="pagination">
    <a-pagination 
      :total="total" 
      :current="currentPage"
      :page-size-options="[5,10,20,30,50]"
      :page-size="pageSize"
      show-total 
      show-jumper 
      show-page-size
      @change="changeCurrentPage"
      @page-size-change = "changeSize"
        />
  </div>
</template>

<script setup lang=ts>
import { } from 'vue';
defineProps({
  total: {
    type: Number,
    default: 100
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize:{
    type: Number,
    default: 10
  }
  
})
let $emits = defineEmits(['currentPage','changeSize'])
const changeCurrentPage = (current:number) => {
  $emits('currentPage', current)
}
const changeSize = (size:number) => {
  $emits('changeSize', size)
}
</script>
<style lang="less" scoped>
@common-color: #465A80;
.pagination{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 48px;
}
::v-deep{
  .arco-pagination-item,
  .arco-pagination-item-active,
  .arco-pagination-total,
  .arco-select-view-value
  {
    color: @common-color;
  }

  .arco-pagination-jumper-prepend{
    color: #A3B0CC;
  }
}
</style>
